/* 底部导航栏 */
<template>
    <div class="tabar-container flex-center">
        <router-link v-for="item in tabList" :key="item.id" :to="item.path" active-class="active">
            <i :class="[...activeClass, item.icon, item.path == route.path ? 'active' : '']"></i>
            {{ item.name }}
        </router-link>
    </div>
</template>

<script setup>
import { computed, defineProps } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

// 父组件传递的值
defineProps({
    tabList: {
        type: Array,
        default: function () {
            return [];
        },
    },
});

const activeClass = computed(() => {
    return ["iconfont"];
});
</script>

<style lang="less" scoped>
.flex-center {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.flex-center-cloumn {
    .flex-center();
    flex-direction: column;
}

.tabar-container {
    height: 48px;
    font-size: 12px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 0.5px solid #d8d8d8;
    background-color: #fff;
    a {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        i {
            font-size: 25px;
        }
    }
}

.active {
    color: var(--active-color) !important;
}
</style>
